<template>
  <view class="px-4 pt-4">
    <!--邀请码: https://wechat.p.qujiaba.com/wechat_h5#/pages/login/share_invite?spread_uid=783818-->
    <view class="text-white">{{ notice }}</view>
    <view class="mt-4 flex justify-center">
      <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
    </view>

    <view class="text-white m-auto mt-4 h-10 w-28 flex justify-center items-center border border-solid rounded-2xl" @click="copyLink">复制链接</view>

  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { tgurlApi } from '@/api/invitationCode'
  import { getInfoApi } from '@/api/fan/index'
  import { onLoad, onReady } from '@dcloudio/uni-app'
  import { uiwu } from '@/api/interface/interface'
  import UQRCode from 'uqrcodejs';

  // const btm = ref('age')
  const notice = ref<string>('')
  const url = ref<string>('')

  onLoad(async () => {
    const res = await getInfoApi()
    notice.value = res.data.notice
  })

  onReady( async () => {
    const res = await tgurlApi()
    url.value = res.data.tgurl
    // 获取uQRCode实例
    var qr = new UQRCode();
    // 设置二维码内容
    qr.data = url.value;
    // 设置二维码大小，必须与canvas设置的宽高一致
    qr.size = 200;
    // 调用制作二维码方法
    qr.make();
    // 获取canvas上下文
    var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
    // 设置uQRCode实例的canvas上下文
    qr.canvasContext = canvasContext;
    // 调用绘制方法将二维码图案绘制到canvas上
    qr.drawCanvas();
  })

  const copyLink = () => {
    uiwu.copy(url.value)
  }
</script>

<style scoped lang="scss">
page {
  min-height: 100vh;
  background: #7f98f4;
}
</style>
